<template>
  <div class="app-container">
    <!--  查询表单  -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="应用名称" prop="serverId">
        <el-input
          v-model="queryParams.serverId"
          placeholder="请输入应用名称"
          clearable
          style="width:150px;"
          size="small"
          @keyup.native.prevent="handleQuery"
        />
      </el-form-item>
      <el-form-item label="链路id" prop="cloudId">
        <el-input
          v-model="queryParams.cloudId"
          placeholder="请输入链路id"
          clearable
          style="width: 270px;"
          size="small"
          @keyup.native.prevent="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!--  增删改查列表  -->
<!--    v-has-permi="['monitor:operlog:export']"-->
    <el-row :gutter="10" class="mb8">
<!--      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col>-->
    </el-row>

    <!--  数据表格  -->
    <el-table ref="tables" v-loading="loading" :data="list" :max-height="tableMaxHeight" border>
      <el-table-column type="selection" width="55" align="center" fixed="left"/>
      <el-table-column label="链路id" align="center" prop="cloudId" width="270"/>
      <el-table-column label="租户id" align="center" prop="tenantId" width="100" show-overflow-tooltip="true"/>
      <el-table-column label="应用名称" align="center" prop="serverId" width="120" />
      <el-table-column label="服务器IP" align="center" prop="serverIp" width="120"/>
      <el-table-column label="应用环境" align="center" prop="env" width="75"/>
      <el-table-column label="请求类型" align="center" prop="method" width="75"/>
      <el-table-column label="请求地址" align="left" prop="requestUri" width="150" show-overflow-tooltip="true"/>
      <el-table-column label="方法名称" align="left" prop="methodName" width="150"/>
      <el-table-column label="响应时间" align="center" prop="time" width="73"/>
      <el-table-column label="请求时间" align="center" prop="requestTime" width="160"/>
      <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row,scope.index)"
          >详细</el-button>
          <!--            v-hasPermi="['monitor:operlog:query']"-->
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="getList" />

    <el-dialog title="请求日志明细" :visible.sync="open" width="750px" top="50" append-to-body="true">
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row type="flex">
          <el-col :span="7"><el-form-item label="应用名称: ">{{ form.serverId }}</el-form-item></el-col>
          <el-col :span="13"><el-form-item label="链路id: ">{{ form.cloudId }}</el-form-item></el-col>
          <el-col :span="6"><el-form-item label="租户ID: ">{{ form.tenantId }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col><el-form-item label="请求参数">{{ form.parameters }}</el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col><el-form-item label="响应结果">{{ form.resultObjects }}</el-form-item></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<!--
  js代码块
-->
<script>
import {list} from '@/api/monitor/reqlog'

export default {
  name: 'ReqLog',
  data() {
    return {
      // 加载遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: true,
      // 表格最大高度
      tableMaxHeight: 450,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: {prop: 'operTime', order: 'descending'},
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        serverId: undefined,
        cloudId: undefined,
        businessType: undefined,
        status: undefined
      }
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    /* 根据浏览器屏幕自适应表格的最大高度 */
    this.$nextTick(() => {
      /* 后面的50：根据需求空出的高度，自行调整 */
      this.tableMaxHeight = window.innerHeight - 250;
    })
  },
  methods: {
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    resetQuery() {
      // TODO 重置页面查询条件

    },
    handleExport() {
      // TODO 数据导出处理

    },
    handleView(row) {
      this.open = true;
      this.form = row;
    }
  }
}
</script>

<!--
   css样式代码块
-->
<style scoped>

</style>
